/* === A savoir, une couleur peut s'écrire de 3 façons === */
/* === avec son nom (exemple orchid) --- Eviter les majuscules === */
/* === avec sa valeur héxadécimale (exemple #DA70D6) --- ne pas oublier le # === */
/* === avec sa valeur décimale (exemple RGB(218,112,214)) --- très peu utilisée === */


/* === A savoir, les instructions ne seront valables que pour le selecteur mentionné === */
/* === exemple header {  }  indique que ces intructions ne seront prises en compte que dans la balise header du fichier html=== */

/* === A savoir, une instruction s'écrit toujours sous la forme  === */
/* === propriété: valeur;  --- ne pas oublier le ;  === */



/* === Mise en forme des zones appelées "header" (deux bandeaux bleus) === */
header{
	height: 190px;
	width: 100%;
	font-size: 45px;
	font-family: algerian;
	text-align: center;
	color:white;
	background-color: #fd6c9e;
	padding: 0px;
}

/* === Mise en forme spécifique pour le premier bandeau bleu === */
#conteneurheader {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
border-style: solid;
overflow: hidden;
}

/* === Mise en forme commune des zones appelées "section" === */
section{
	color:rgb(160,160,160);
	min-width: 200px;
}
section h2{				/* === Mise en forme des titres de type h2 à l'intérieur de la zone "section" === */
	color: #fd6c9e ;
}


/* === Mise en forme spécifique de la première zone "section" === */
#conteneursectionP{
width: 75%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin: auto;
padding: 8px;
flex-wrap: nowrap;
border-style: hidden;
}

/* === Mise en forme spécifique de la seconde zone "section" === */
#conteneursection1 {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 4px;
flex-wrap: wrap;
border-style: hidden;
overflow: hidden;
}

/* === Mise en forme spécifique en fonction du nom des class (exemple en ligne 12) === */

.sport {
background-color: orange;
}
.culture-art {
background-color: mediumpurple;
}
.creation {
background-color: darkred;
}
.outreterre{
background-color: darkcyan;
}
.personnalite{
background-color: tomato;
}
.indefini{
background-color: #FFDBE8;
}

.texte{
width: 75%;
}


/* === Mise en forme de la zone appelée "article" (zone où vous écrirez votre article) === */

article{
flex: 3;
background-color: white;
}


/* === Mise en forme de la zone appelée "footer" (en pied de page) === */

footer{
	color:#303030;
	background-color: #C94F79;
	min-height: 100px;
}
footer p {
	font-size: 1rem;				/* === le rem est une unité d emesure qui vaut environ 16px === */
	text-decoration: underline;
}